<template>
  <view class="container tn-safe-area-inset-bottom tn-flex tn-flex-direction-column">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha="false">文章详情</tn-nav-bar>

    <view class="tn-width-full">
      <swiper class="cx-top-banner cx-top-banner-view" :circular="true"
        :autoplay="true" duration="500" interval="30000">
        <swiper-item v-for="(item,index) in bannerList" :key="index">
          <view class="item image">
            <image :src="item.picture" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="cx-view tn-bg-white tn-skeleton">
      <view class="tn-padding-top tn-padding-bottom">
        <view class="tn-margin-sm">
          <view class="tn-margin-sm tn-text-bold tn-text-xl">
            <text class="tn-skeleton-fillet">{{ data.title || '' }}</text>
            <text class=""></text>
          </view>
          <view class="justify-content-item tn-flex-col-center tn-text-right">
            <view class="tn-color-gray tn-padding-right-sm tn-text-sm">
              <text class="tn-project-content__count-icon tn-icon-fire tn-padding-right-xs"></text>
              <text>{{ data.browse_total }}</text>
            </view>
          </view>
        </view>
      </view>


      <!-- 边距间隔 -->
      <view class="tn-strip-bottom"></view><!-- 概述信息-->

      <view class="tn-padding-xs">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="28">
          <view class="tn-flex tn-flex-col-center">
            <view class="tn-flex-1 tn-text-bold">文章类型</view>
            <view class="tn-margin-left-sm">
              <view v-if="data.category">{{ data.category.title || '' }}</view>
            </view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="28">
          <view class="tn-flex tn-flex-col-center">
            <view class="tn-flex-1 tn-text-bold">编写作者</view>
            <view class="tn-margin-left-sm">
              <view v-if="data.member">{{ data.member.nickname || '' }}</view>
            </view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="28">
          <view class="tn-flex tn-flex-col-center">
            <view class="tn-flex-1 tn-text-bold">发布时间</view>
            <view class="tn-margin-left-sm">
              {{ data.create_time || '' }}
            </view>
          </view>
        </tn-list-cell>
      </view>

      <!-- 边距间隔 -->
      <view class="tn-strip-bottom"></view>

      <view class="tn-flex tn-flex-direction-column">
        <view class="tn-margin-top tn-margin-left tn-margin-right">
          <view class="tn-margin-bottom tn-skeleton-fillet content">
            <view class="cx-editor justify-content-item">
              <mp-html v-if="data.detail && data.detail.content" :content="data.detail.content" :preview-img="true" :show-img-menu="false" :lazy-load="true"/>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>

    <!-- 底部菜单 -->
    <view class="tn-margin-top-100">
      <view class="tn-bottom-nav tn-bottom-nav--fixed tn-safe-area-inset-bottom">
        <view class="options">
          <view class="options__item">
            <block>
              <button class="tn-col-2" open-type="share">
                <view class="options__item__icon tn-icon-share-square"></view>
                <view class="options__item__text">分享</view>
              </button>
              <button class="tn-col-2" open-type="contact">
                <view class="options__item__icon tn-icon-service"></view>
                <view class="options__item__text">交流</view>
              </button>
              <button class="tn-col-2" @click="handleCollection(data.id)">
                <view v-if="is_collection">
                  <view class="options__item__icon options__item__selected1 tn-icon-star-fill"></view>
                  <view class="options__item__text options__item__selected1">已收藏</view>
                </view>
                <view v-else>
                  <view class="options__item__icon tn-icon-star"></view>
                  <view class="options__item__text">收藏</view>
                </view>
              </button>
              <button v-if="is_approval" class="tn-col-6 tn-cool-bg-color-15" @click="handleApproval(data.id)">
                <view class="options__item__text2">已点赞</view>
              </button>
              <button v-else class="tn-col-6 tn-cool-bg-color-8" @click="handleApproval(data.id)">
                <view class="options__item__text2">赞一下吧</view>
              </button>
            </block>
          </view>
        </view>
      </view>
    </view>

    <view class="tn-tabbar-height2"></view>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js';
  import share from '@/common/mixin/share.js';
	import request from '@/common/request.js';
  export default {
    name: 'articleView',
    mixins: [base, share],
    data(){
      return {
        model: 'business/article',
        memberModel: 'member/article',
        bannerList: [],
        data:
        {
          id: null,
          title: null,
          detail: null,
          create_time: null,
          category: {},
          share_total: 0,
          collection_total: 0,
          approval_total: 0,
          browse_total: 0,
        },
        is_collection: false,
        is_approval: false
      }
    },
    methods: {
			// 监听用户点击右上角菜单的「转发」按钮时触发的事件
			onShareAppMessage: function(options) {
			  return this.handleShareAppMessage(options);
			},
			// 监听用户点击右上角菜单的「分享到朋友圈」按钮时触发的事件
			onShareTimeline: function(options) {
			  return this.handleShareTimeline(options);
			},
      getBannerData: function() {
        request.httpRequest('advertising/select', {position__title: 'article_view_banner', limit: 4}).then(res => {
          this.bannerList = res;
        });
      }
    },
    onLoad(option) {
      this.getBannerData();
      this.getViewData(option.id);
      this.isCollection(option.id);
      this.isApproval(option.id);
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';

  .crate_time {
    height: 30rpx;
  }
  ::v-deep img {
    width: 100%;
  }
  
</style>
